<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>欢迎使用专家特贴系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body>
<div id="app">

    <input th:value="zhengcetongzhi" type="hidden" id="type">

    <template>
        <div class="menu">
            <ul class="submenu">
                <li id="zhengce" class="cur"><a href="javascript:void(0);" >政策通知</a></li>
                <!--<li id="zhinan"><a href="javascript:void(0);" @click="showzhinan">办事指南</a></li>-->
            </ul>
            <div class="list">
                <ul id="gonggaolist" class="u-list">
                    <li v-if="showzhengcetongzhi" v-for="(gonggao,index) in arrayData"
                        @click="gonggaoDetail(gonggao.gonggaoid,gonggao.gonggaobiaoti)" :key="gonggao.gonggaoid">
                        <a href="javascript:void(0);">{{gonggao.gonggaobiaoti}}</a>
                        <span>{{gonggao.fabushijian}}</span>
                    </li>
                    <li v-if="showbanshizhinan" v-for="gonggao in arrayData"
                        @click="gonggaoDetail(gonggao.gonggaoid,gonggao.gonggaobiaoti)" :key="gonggao.gonggaoid">
                        <a href="javascript:void(0);">{{gonggao.gonggaobiaoti}}</a>
                        <span>{{gonggao.fabushijian}}</span>
                    </li>

                </ul>
            </div>
            <div class="pager" id="pager">
                <div class="pagercontent">
                    <span class="form-inline">
                        <select class="form-control" v-model="pagesize" v-on:change="showPagebefore" number>
                            <option value="10">10</option>
                            <option value="20">20</option>
                        </select>
                    </span>
                    <div v-for="item in pageCount+1">
                        <span v-if="item==1" class="btn" v-on:click="showPage(1)">
                            首页
                        </span>
                        <span v-if="item==1" class="btn" v-on:click="showPage(pageCurrent-1)">
                            上一页
                        </span>
                        <span v-if="item==1" class="btn" v-on:click="showPage(item)">
                            {{item}}
                        </span>
                        <span v-if="item==1&&item<showPagesStart-1" class="btn disabled">
                            ...
                        </span>
                        <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount"
                              class="btn" v-on:click="showPage(item)">
                            {{item}}
                        </span>
                        <span v-if="item==pageCount&&item>showPageEnd+1" class="btn  disabled">
                            ...
                        </span>
                        <span v-if="item==pageCount&&item!=1" class="btn" v-on:click="showPage(item)">
                            {{item}}
                        </span>
                        <span v-if="item==pageCount" class="btn" v-on:click="showPage(pageCurrent+1)">
                            下一页
                        </span>
                        <span v-if="item==pageCount" class="btn" v-on:click="showPage(pageCount)">
                            尾页
                        </span>
                    </div>
                    <span class="form-inline">
                        <input class="pageIndex form-control" style="width:60px;text-align:center" type="text"
                               v-model="pageCurrent " v-on:keyup.enter="showPage(pageCurrent,true)"/>
                    </span>
                    <span class="ccc">{{pageCurrent}}/{{pageCount}}</span>
                </div>
            </div>
        </div>
    </template>
</div>
</body>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/system/gonggao/gonggaoView.js?v=1.1}"></script>
</html>

<style>
    .u-list li a {
        width: 100%;
        padding-right: 120px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .u-list li {
        list-style-type: disc;
        position: relative;
        height: 35px;
        padding-left: 23px;
        font-size: 18px;
        margin: 20px;
    }

    a {
        text-decoration: none;
        color: #333;
    }

    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }

    .menu {
        display: block;
        width: 1200px;
        margin: 30px auto;
    }

    .submenu li {
        float: left;
        min-width: 112px;
        padding: 0 20px;
        text-align: center;
        background: #ecf2f6;
        margin-right: 10px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        height: 39px;
    }

    .submenu li.cur a {
        color: #fff;
    }

    .submenu li.cur {
        background: #d60000;
        font-weight: bold;
    }

    .submenu {
        left: 50%;
        height: 39px;
        line-height: 39px;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 30px;
    }

    .submenu li a {
        font-size: 20px;
    }

    ul {
        list-style-type: none;
    }

    body {
        background: #ffffff
    }

    .u-list li span {
        position: absolute;
        right: 0;
        top: 0;
        height: 38px;
        color: #999999;
    }

    * {
        box-sizing: border-box;
        font-family: 'PingFangSC-Regular', 'helvetica neue', arial, 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', sans-serif;
    }

    #pager {
        display: flex;
    }

    .active {
        background-color: #087cd6;
        border-color: #e7e7e7;
        color: #fff;
    }

    .form-inline {
        margin: auto 4px;
    }

    .ccc {
        margin: auto 2px;
    }

    .btn {
        border: 1px solid #999;
    }

    .u-list li .empty {
        height: 1px;
        border-top: 1px dashed #dddddd;
        margin: 20px 0;
    }
    .pagercontent{
        display: flex;
        margin: auto;
    }
</style>


